import React, { memo, createRef, forwardRef, Component, PureComponent, useRef, useEffect } from 'react'
import { findDOMNode } from 'react-dom'

// 封装了一个组件
// refs 1. dom 节点
// 2. 组件 组件实例

// 1. findDOMNode 只能用在class（类）组件上
// 2. forwardRef 针对函数组件的

// 需求：通过访问一个子组件的实例，然后，让子组件内部的一个input框自动聚焦
// <input /> input.focus()

// class Animate extends React.PureComponent {
//   // shouldComponentUpdate() {
//   //   // return true false
//   // }

//   render() {
//     return <div></div>
//   }
// }

// class Person extends Component {
//   render() {
//     return (
//       <>
//         <input type="text" />
//         <button onClick={() => console.log('like button')}></button>
//       </>
//     )
//   }
// }

// const FooBar = () => {
//   const ref = useRef()

//   useEffect(() => {
//     console.log(ref.current)
//   }, [])

//   // setTimeout(() => {
//   //   console.log(ref.current)
//   // }, 1000)
//   return <input ref={ref} />
// }

// 函数组件上使用refs
// const Child = forwardRef((props, ref) => {
//   return <input type="text" ref={ref} />
// })

// const Child1 = () => {
//   console.log('render: Child1:')
//   return <div>child1</div>
// }

class Child1 extends PureComponent {
  state = {
    color: '#ccc',
  }
  // 一般用在子组件中
  // shouldComponentUpdate(state, props) {
  //   // console.log(state, props)
  //   if (props.count) {
  //     return true
  //   } else {
  //     return false
  //   }
  // }
  render() {
    console.log('render: Child1:')
    return <div>child1</div>
  }
}
// memo() 一个组件，他的参数是组件，并且返回一个组件，他就是高阶组件
const Child2 = memo(() => {
  console.log('render: Child2:')
  return <div>child2</div>
})

// class:组件
// React.PureComponent == shouldComponentUpdate
// 优化: 主要优化子组件 -> 不想关的render

export default class MyList extends Component {
  state = {
    count: 0,
  }
  componentDidMount() {
    // console.log(this.myRef.current.focus())
    // let node = findDOMNode(this.myRef.current)
    // console.log(node.focus(), 'node')
  }
  render() {
    return (
      <div className="list-wrapper">
        <h1>MyList {this.state.count}</h1>
        <button
          onClick={() => {
            this.setState({
              count: this.state.count + 1,
            })
          }}
        >
          点赞
        </button>

        <Child1 />

        <Child2 />
        <header className="list-header">
          {/* <input ref={this.myRef} /> */}
          {/* <FooBar ref={(instance) => (this.instance = instance)} /> */}
          {/* <FooBar /> */}
          {/* 父组件： */}
          {/* <input ref={this.inputRef} /> */}
          {/* <Child ref={this.myRef} />
          <Person ref={this.myRef} /> */}
        </header>
        <header className="list-main"></header>
        <header className="list-footer"></header>
      </div>
    )
  }
}
